import React from "react";
import { Form, FormItemProps, FormProps } from "antd";
import FormRow from "./FormRow";

export interface MyFormItemProps extends FormItemProps {
    hidden?: boolean
}

export interface PageFormProps {
    formList: Array<MyFormItemProps>
    loopKey: string
    formProps?: FormProps
}

const PageForm: React.FC<PageFormProps> = ({ formList, loopKey, formProps = { layout: "vertical" } }) => {

    let children = [] as Array<React.ReactElement>
    formList.forEach((item, index) => {
        if (!item.hidden) {
            children.push(
                <Form.Item key={`${loopKey}_PageForm_${index}`} label={item.label} {...item}>
                    {item.children}
                </Form.Item>
            )
        }
    })
    if (children.length === 0) children.push(<></>)
    return <Form {...formProps}>
        <FormRow children={children} keyName={loopKey} />
    </Form>
}

export default PageForm